<template>
  <view>
    <view class="box">
      <text class="">头像</text>
      <text class="yticon icon-you" style="float: right"></text>
      <image :src="Img"></image>
    </view>
    <view class="box">
      <text>会员号</text>
      <text>{{ Member[0].MemberId }}</text>
    </view>
    <view class="box">
      <text>名称</text>
      <input v-model="NiName" placeholder="请输入名称" />
    </view>

    <!-- :value="Member[0].NiName" -->
    <view class="box">
      <text>手机号</text>
      <text>{{ Member[0].Number }}</text>
    </view>
    <view class="prod"></view>
    <view class="box">
      <text>生日</text>
      <text
        class="yticon icon-you"
        style="float: right; margin-left: 20rpx"
      ></text>
      <picker
        mode="date"
        :value="birthday"
        start="1900-01-01"
        end="2100-01-01"
        @change="bindDateChange"
      >
        <view class="picker" v-if="birthday == ''">生日(必填)</view>
        <view class="picker" v-else>{{ birthday }}</view>
      </picker>
    </view>
    <view class="box">
      <text>性别</text>
      <!-- <view class="" > -->
      <radio-group class="" @change="checkbox" style="float: right">
        <view style="float: left; padding: 0 20rpx">
          <text style="margin: 0 10rpx">男</text>
          <radio value="0" :checked="checked"></radio>
        </view>
        <view style="float: left">
          <text style="margin: 0 10rpx">女</text>
          <radio value="1" :checked="!checked"></radio>
        </view>
      </radio-group>
      <!-- </view> -->
    </view>
    <view class="box">
      <text>邮箱</text>
      <input v-model="Email" placeholder="请输入邮箱地址" />
    </view>
    <view class="box">
      <text>地址</text>
      <input v-model="Address" placeholder="请输入收货地址" />
    </view>
    <!-- 	<view class="box">
			<text>QQ</text>
			<input v-model="QQ"  placeholder="请输入QQ号码" />
		</view> -->
    <button class="but" id="save" @click="onSave">保存</button>
  </view>
</template>

<script>
import { reqPost } from "../../common/http.request";
import { uToast } from "../../utils/uniUtils";

export default {
  data() {
    return {
      Member: "",
      Img: "",
      birthday: "",
      sex: 0,
      NiName: "",
      Email: "",
      Address: "",
      QQ: "",
      checked: true,
    };
  },
  onLoad() {
    this.Member = uni.getStorageSync("Members");
    let userInfo = uni.getStorageSync("userInfo");
    this.Img = userInfo.avatarUrl || "/static/images/my/missing-face.png";
    this.birthday = this.Member[0].FBirthday || "";
    this.NiName = this.Member[0].NiName;
    this.Address = this.Member[0].FAddress;
    this.Email = this.Member[0].FEmail;
    if (this.Member[0].FSex == 0) {
      //男
      this.sex = 0;
    } else {
      //女
      this.sex = 1;
      this.checked = !this.checked;
    }
  },
  methods: {
    //生日
    bindDateChange(e) {
      console.log(e);
      let val = e.detail.value;
      this.birthday = val;
    },
    //性别
    checkbox(e) {
      console.log(e);
      let sex = e.detail.value;
      this.sex = sex;
    },

    //保存
    async onSave() {
      let data = {
        Name: this.NiName,
        Sex: this.sex,
        Birthday: this.birthday,
        Email: this.Email,
        Address: this.Address,
        phone: this.Member[0].Number,
      };

      if (this.NiName.trim().length == 0) {
        uToast("昵称不能为空!", "error");
        return;
      }

      try {
        await reqPost("EditDetail", data);
        this.Member[0].NiName = this.NiName;
        this.Member[0].FBirthday = this.birthday;
        this.Member[0].FAddress = this.Address;
        this.Member[0].FEmail = this.Email;
        this.Member[0].FSex = this.sex;
        uni.setStorageSync("Members", this.Member);
        uToast("修改成功!");
      } catch (err) {
        console.log("err-->", err);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}

.box {
  padding: 0 20rpx 0 30rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 2rpx solid #f8f8f8;
  font-size: 32rpx;
  color: #000;
  background-color: #fff;

  text:first-child {
    float: left;
  }

  text:last-child {
    float: right;
  }

  input {
    width: 500rpx;
    height: 100rpx;
    float: right;
    text-align: right;
  }

  picker {
    width: 500rpx;
    float: right;
    text-align: right;
  }

  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 100rpx;
    float: right;
    margin: 20rpx;
    // border: 2rpx solid #000;
  }
}

.box:first-child {
  height: 180rpx;
  line-height: 180rpx;
}

#save {
  margin: 50rpx auto;
  width: 600rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 50rpx;
  background-color: #dd524d;
}
</style>
